<!-- author:szc -->
<script setup>
/**
 * @libs
 */
import { ref } from 'vue'

/**
 * @components
 */
import part_1 from './ss-home/part_1.vue'
import part_2 from './ss-home/part_2.vue'
import part_3 from './ss-home/part_3.vue'
import part_4 from './ss-home/part_4.vue'
import part_5 from './ss-home/part_5.vue'
import part_6 from './ss-home/part_6.vue'
import part_7 from './ss-home/part_7.vue'
import part_8 from './ss-home/part_8.vue'
import part_9 from './ss-home/part_9.vue'
import part_10 from './ss-home/part_10.vue'
import part_11 from './ss-home/part_11.vue'
import part_12 from './ss-home/part_12.vue'

</script>
<template>
  <div class="ss-home-class">
    <part_1></part_1>
    <part_2></part_2>
    <part_3></part_3>
    <part_4></part_4>
    <part_5></part_5>
    <part_6 ></part_6>
    <part_7 v-transitionAnimationAppears="'slide-top'"></part_7>
    <part_8 v-transitionAnimationAppears="'slide-top'"></part_8>
    <part_9></part_9>
    <part_10></part_10>
    <part_11 v-transitionAnimationAppears="'slide-top'"></part_11>
    <part_12></part_12>
    <!-- 一下为演示添加动画效果注意slide-top需要再被单引号引用 -->
    <!-- <part_12 v-transitionAnimationAppears="'slide-top'"></part_12> -->
  </div>
</template>
<style scoped>
@import '@/assets/animation/slide-top.css';
.ss-home-class{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>